<template>
  <div class="mainContainer">
    <!-- 表单盒子 -->
    <div class="formContent">
      <!-- 头像div -->
      <div class="headPitchure">
        <!-- 图片大小撑起和div一致 -->
        <img src="../assets/logo.png" width="100%" height="100%" />
      </div>
      <!-- 表单区域 -->
      <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForm">
        <el-form-item prop="username">
          <!-- 添加前缀图标 -->
          <el-input prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <!-- 添加前缀图标 -->
          <el-input prefix-icon="el-icon-lock" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="vaildForm">登录</el-button>
          <el-button type="info" @click="resetInputs">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  // 数据部分
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      // 表单输入规则制定
      rules: {
        username: [
          // required 必填  trigger鼠标移动后开始校验
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  //方法部分
  methods: {
    // 重置表单输入
    resetInputs() {
      //$refs["loginForm"]代表获取dom对象
      this.$refs["loginForm"].resetFields();
    },
    //获取校验后的结果
    vaildForm() {
      this.$refs["loginForm"].validate(vaild => {
        //此vaild就是登录验证后的结果,若表单输入符合规则正确，结果就为true
        console.log(vaild);
        if (vaild) {
          //发起一次post请求；
          this.$http.post("login", this.loginForm).then(res => {
            // 打印返回结果
            console.log(res);
            if (res.data.result == "sucess") {
              // 成功的提示消息
              this.$message({
                message: "恭喜你，这是一条成功消息",
                type: "success"
              });
            }
          });
           // 路由跳转
        this.$router.push("/home");
        }
       
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->


<style  scoped>
.mainContainer {
  height: 100%;
  background-color: antiquewhite;
}
/* 表单主体居中 */
.formContent {
  width: 450px;
  height: 300px;
  /* 设置div颜色 */
  background-color: azure;
  /* 圆角 */
  border-radius: 3px;
  /* 定位设置相关 */
  position: absolute;
  top: 50%;
  left: 50%;
  /* 在位移基础上再位移，第一个横向移动，第二个纵向移动 */
  transform: translate(-50%, -50%);
}
/* 设置div大小 */
.headPitchure {
  height: 100px;
  width: 120px;
  /* 给div设置边框，1像素，颜色淡黑 */
  border: 1px solid #eee;
  position: absolute;
  left: 50%;
  /* 在位移基础上再位移，位移大小是盒子div的边距，第一个横向移动，第二个纵向移动 */
  transform: translate(-50%, -50%);
}
/* 按钮弹性分布，直接对齐到盒子最右边 */
.btns {
  display: flex;
  justify-content: flex-end;
 
}
/* 登录表单，贴近盒子底部，宽度占满盒子, */
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* 距离盒子左右侧再有20像素，盒子内边距 */
  padding-left: 20px;
  padding-right: 20px;
  /* 将其塞到盒子内部，不超出盒子 */
  box-sizing: border-box;
}
</style>